<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>从上传控件获取用户选定的图像</title>
    <style>
        html,
        body {
            margin: 5px;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="cvs" width="500" height="500" style='border:1px solid silver'>
        浏览器不支持Canvas……
    </canvas>
    <input type="file" id="file">
    <script>
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');

    // 文件上传控件
    var fileInput = document.getElementById('file');

    // 用户选择文件之后，会发生change事件，监听这个事件
    fileInput.addEventListener('change', function () {

        var imageFile = fileInput.files[0];

        // 用于把file对象转换成一个当前页面里可以使用的url。记住就行。
        var url = URL.createObjectURL(imageFile);

        var img = new Image();
        img.src = url;
        img.addEventListener('load', function () {
            // 图像加载之后执行：使图像正好占满屏幕又不改变缩放的大小
            var w = img.width;
            var h = img.height;
            var scaleX = 500 / w;
            var scaleY = 500 / h;
            var scale = scaleX < scaleY ? scaleX : scaleY;

            ctx.save();
            ctx.translate(250, 250);
            ctx.scale(scale, scale); // 对坐标系进行缩放
            ctx.drawImage(img, -w / 2, -h / 2);

            ctx.restore();
        })
    });

</script>
</body>

</html>